<template>
  <div class="app-container">
    <el-form ref="listFilterRef" :model="list.filter" inline>
      <el-form-item prop="areaCode">
        <AllRegionSelect
          v-model="list.filter.areaCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item prop="businessName">
        <el-input
          v-model.trim="list.filter.businessName"
          placeholder="商圈名称"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-button @click="$refs.listFilterRef.resetFields()">重置</el-button>
    </el-form>

    <div class="table-operation">
      <span>
        <AuthButton @click="c()" name="新增" />
        <!-- <AuthButton
          @click="downloadReport"
          :loading="downloadLoading"
          name="导出"
        /> -->
        <ExportExcel
          url="/sot-admin-api/hotel/yjwlHotelBusiness/export"
          :param="list.filter"
        />
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      stripe
      v-loading="list.loading"
      :data="list.data"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="序号" width="100" type="index" />
      <el-table-column label="商圈名称" prop="businessName" />
      <el-table-column label="所属地区" prop="areaName" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <AuthButton @click="r(row)" name="查看" />
          <AuthButton @click="u(row)" name="编辑" />
          <AuthButton @click="d(row)" name="删除" />
        </template>
      </el-table-column>
    </el-table>
    <KiFormDialog 
      :show.sync="form.show"
      :loading="form.loading"
      :title="form.status | dialogTitle__"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
    >
      <template #el-form>
        <el-tabs value="first">
          <el-tab-pane label="基本信息" name="first"></el-tab-pane>
        </el-tabs>
        <el-form-item
          label="商圈名称"
          prop="businessName"
          :verify="{ minLength : 2, maxLength: 10 }"
        >
          <el-input
            v-model="form.data.businessName"
            placeholder="请输入商圈名称"
            maxlength="10"
            show-word-limit
          />
        </el-form-item>
        <el-tabs value="first">
          <el-tab-pane label="位置信息" name="first"></el-tab-pane>
        </el-tabs>
        <el-form-item label="所属地区" prop="areaCode" verify>
          <AllRegionSelect
            v-model="form.data.areaCode"
            :props="{ checkStrictly: true }"
            :pathLabel.sync="form.data.areaName"
          />
        </el-form-item>
        <el-form-item prop="address" label="所在位置" verify>
          <el-col :span="4">
            <el-button @click="showCoordPicker = true" type="primary" plain
              >地图选点</el-button>
            <CoordPicker
              :city="form.data.areaCode"
              :show.sync="showCoordPicker"
              :lng.sync="form.data.longitude"
              :lat.sync="form.data.latitude"
              :address.sync="form.data.address"
            />
          </el-col>
          <el-col :span="20">
            <el-input
              v-model="form.data.address"
              placeholder="请点击左侧按钮选择"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="坐标">
          <el-col :span="11">
            <el-form-item prop="longitude" verify>
              <el-input
                v-model="form.data.longitude"
                placeholder="经度"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="2" style="text-align: center;">-</el-col>
          <el-col :span="11">
            <el-form-item prop="latitude" verify>
              <el-input
                v-model="form.data.latitude"
                placeholder="纬度"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-form-item>
      </template>
    </KiFormDialog >
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import { mapGetters } from 'vuex'
// import { downloadReport } from '@/utils/downloadFile'

export default {
  mixins: [pageMixin],
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/hotel/yjwlHotelBusiness',
    list: {
      filter: {
        // areaCode: '520000000000'
      }
    },
    form : {
      data: {
        // areaCode: '520000000000'
      }
    },
  }),
  data () {
    return {
      showCoordPicker: false,
      downloadLoading: false
    }
  },
  watch: {
    /**
     * areaCode变化时清除经纬度，直接在RegionSelect的change事件上执行，会导致查询到的经纬度被清空
     * @author: wang pingqi
     */
    "form.data.areaCode": {
      handler(nv,ov) {
        if (nv && ov && nv!=ov ){
          this.$set(this.form.data,'longitude',null);
          this.$set(this.form.data,'latitude',null);
        }
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters(['areaTree'])
  },
  methods: {
    // downloadReport () {
    //   this.downloadLoading = true
    //   downloadReport('sot-admin-api/hotel/yjwlHotelBusiness/export').finally(_ => {
    //     this.downloadLoading = false
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped></style>
